<template>
  <div class="echarts-container" id="doughnutContainer"></div>
</template>
  
<script>
//import * as echarts from "echarts";
// 引入柱状图图表，图表后缀都为 Chart
import { toRaw } from "@vue/reactivity";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent 
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  PieChart,
  LegendComponent,
  CanvasRenderer,
]);

export default {
  data() {
    return {
      //图表对象
      echartsObj: null,
    };
  },
  props: {
    data: Object,
  },
  mounted() {
    const obj = toRaw(this.data);
    this.createdCharts(obj);
  },
  methods: {
    /**
     * 数据初始化配置
     */
    createdCharts(data) {
      //const ec = echarts as any;
      this.echartsObj = echarts.init(
        document.getElementById("doughnutContainer")
      );

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        grid: {
          left: "10%",
        },
        legend: {
          orient: "vertical",
          left: 20,
          top: 20,
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: data.name,
            type: "pie",
            radius: ["50%", "80%"],
            center: ["60%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "right",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
              },
            },
            labelLine: {
              show: false,
            },
            data: data.list,
          },
        ],
      };
      //窗口大小改变
      window.addEventListener("resize", () => this.echartsObj.resize(), false);
      this.echartsObj.setOption(option);
    },

    unmounted() {
      window.removeEventListener("resize", this.echartsObj.resize(), false);
    },
  },
};
</script>
  
<style lang="scss">
.echarts-container {
  height: 100%;
}
</style>